<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">测评审核( 表1-2 )</div>
          <div class="tablelink">

            <!-- <el-link icon="el-icon-plus" v-if="permissions.ceping_cepinghdglb_add" type="primary" @click="hdglAddOrUpdateHandle($event,null)" :underline="false">新增测评会议</el-link> -->
          </div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="测评会议名称">
            <el-input v-model="dataForm.hdName" style="width:300px" placeholder="请输入测评会议名称"></el-input>
          </el-form-item>
          <el-form-item label="测评会议状态">
            <el-select v-model="dataForm.hdZt" placeholder="请选择会议状态" :clearable="clearable" class="xiaLa">
              <el-option label="未开始" value="未开始"></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="已结束" value="已结束"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联类型">
            <el-select v-model="dataForm.hdCppfs" placeholder="请选择关联类型" :clearable="clearable" class="xiaLa">
              <el-option label="单票" value="单票"></el-option>
              <el-option label="部门" value="部门"></el-option>
              <el-option label="个人" value="个人"></el-option>
              <el-option label="部门与个人" value="部门与个人"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
          </el-form-item>
        </el-form>

<!--        <div class="avue-crud" style="max-height:calc(100vh - 475px)">-->
        <div class="avue-crud" style="height:60vh">
          <el-collapse v-model="activeName" @change="selinformation(index)" accordion v-for="(record, index) in dataList" :key="index">
            <el-collapse-item :name=index>
              <template slot="title">
                <div class="collapseBox">
                  <div class="flex alignItemsCenter">
                    <span class="numTip">{{selxh(index)}}</span>
                    <span class="titleBox">{{ record.hdName }} (<span :class="hdZt(determine(record.hdZt, record.hdJssj))">{{ determine(record.hdZt, record.hdJssj) }}</span>)</span>
                  </div>
                  <div class="collapseSummary flex justifyContentSpaceBetween">
                    <div>
                      <div class="mb5"><span>会议开始时间：{{record.hdKssj}}</span><span class="marginLeft">会议结束时间：{{record.hdJssj}}</span></div>
                      <div class="mb5"><span>关联类型：{{record.hdCppfs}}</span><span class="marginLeft">创建时间：{{$moment(record.createTime).format("YYYY-MM-DD")}}</span><span class="marginLeft">创建人：{{record.createUserName}}</span></div>
                      <div class="md5"><span>审核状态：<span :class="Zt(record.hdSh)">{{record.hdSh}}</span></span><span class="marginLeft"> 是否联合出票：{{record.hdSflhcp == 1?"是":"否"}}</span></div>

                      <div class="flex alignItemsCenter mb5" v-if="record.hdZt == '进行中'" @click="copyText($event,encapsulation(record,'1'))">
                        <span class="flexShrink">匿名打分地址：</span> <span class="scoreAddr">{{encapsulation(record,"1")}}</span>
                        <el-button type="primary">复制</el-button>
                      </div>
                      <div class="flex alignItemsCenter" v-if="record.hdZt == '进行中'" @click="copyText($event,encapsulation(record,'0'))">
                        <span class="flexShrink">实名打分地址：</span> <span class="scoreAddr">{{encapsulation(record,"0")}}</span>
                        <el-button type="primary">复制</el-button>
                      </div>
                    </div>

                    <div class="leftGu">
                      <el-button v-if="permissions.ceping_cepinghdglb_view && (record.hdZt == '进行中' || record.hdZt == '已结束')" type="primary" plain @click="hdpgkOpen($event,record)">会议概况</el-button>
                      <el-button v-if="permissions.ceping_cepinghdglb_view && record.hdZt == '已结束'" type="primary" plain @click="hdhzOpen($event,record)">会议汇总</el-button>
                      <el-button v-if="permissions.ceping_cepinghdglb_add && (record.hdZt == '未开始' && record.hdSh == '审核中')" type="primary" plain @click="cepingOpen($event,record.id)">启动</el-button>
                      <el-button v-if="permissions.ceping_cepinghdglb_add && record.hdZt == '进行中'" type="primary" plain @click="jointVote($event,record.id)">合票</el-button>
                      <el-button v-if="permissions.ceping_cepinghdglb_add && record.hdZt == '进行中'" type="primary" plain @click="qrcode($event,record.id)">匿名二维码</el-button>
                      <el-button v-if="permissions.ceping_cepinghdglb_edit && (record.hdZt == '未开始' && record.hdSh == '审核中')" type="primary" plain @click="toExamine($event,record)">驳回</el-button>
                    </div>
                  </div>
                </div>
              </template>

              <div v-for="(data, index) in record.sjlist" :key="index">
                <div class="custom-tree-node flex justifyContentSpaceBetween">
                  <div class="flex alignItemsCenter">
                    <span class="numTip">{{index+1}}</span>
                    <span>{{data.cppName}}</span>
                    <span>({{data.cppQz}}%)</span>
                    <span>{{data.lhcpBj == 1?"（联合主票）":""}}</span>
                  </div>
                  <div class="hangJu">
                    <el-button v-if="permissions.ceping_cepinghdglb_view  && (record.hdZt == '进行中' || record.hdZt == '已结束')" type="primary" plain @click="cppgkOpen($event,record,data)">测评票概况</el-button>
                    <el-button v-if="permissions.ceping_cepinghdglb_view" type="primary" plain @click="reading(data)">测评票预览</el-button>
                    <el-button v-if="permissions.ceping_cepinghdglb_view && record.hdZt == '已结束'" type="primary" plain @click="cpphzOpen($event,record,data)">测评票汇总</el-button>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!--新增、编辑测评会议管理-->
      <hdglb v-if="hdglAddOrUpdateVisible" ref="hdglAddOrUpdate" @refreshList="zjOperation"></hdglb>
      <!--新增、编辑测评会议测评票-->
      <hdgl-cpp v-if="hdglCppAddOrUpdateVisibale" ref="hdglCppAddOrUpdate" @refreshSubList="getDataList"></hdgl-cpp>
      <!--查看述职报告-->
      <hdglbSz v-if="hdglSzAddOrUpdateVisibale" ref="hdglSzAddOrUpdate" @refreshSubList="getDataList"></hdglbSz>
      <!-- 票概况  -->
      <cepingphz v-if="cepingphzVisible" ref="cepingPhz"></cepingphz>
      <!-- 测评票预览 -->
      <cepingpiaoYulan v-if="cepingpiaoYulanVisible" ref="cepingpiaoYulan"></cepingpiaoYulan>
      <!-- 测评票汇总  -->
      <cepinghdcphzDialog ref="cepinghdcphzDialog"></cepinghdcphzDialog>
      <!-- 会议汇总  -->
      <cepinghdzhhzDialog ref="cepinghdzhhzDialog"></cepinghdzhhzDialog>
      <!-- 二维码  -->
      <qrcodeDialog ref="qrcodeDialog"></qrcodeDialog>
      <input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;" />
    </basic-container>
  </div>
</template>

<script>
/*!
 * 绩效考核-测评发起列表
 *
 * @author zmk
 * @date 2021-06-13 12:11:35
 * @update 2021-06-25 09:02 linh  测评会议[增、删、改、查]
 * @update 2021-06-25 18:16 linh  测评票[增、删、改、查]
 */
import { fetchList, cepingOpen, delObj, updateHdSh, jointVote } from '@/api/ceping/cepinghdglb'
import { selhdidList, delObjCpp, selCppList } from '@/api/ceping/cepinghdglcppmxb'

import Hdglb from './cepinghdglb-form'
import hdglCpp from './cepinghdglcppmxb-form'
import hdglbSz from './cepinghdglbsz-form'
import cepingphz from "../cepinghdglb/cepingphz-form";
import cepinghdcphzDialog from "../cepinghdglb/cepinghdcphzDialog";
import cepinghdzhhzDialog from "./cepinghdzhhzDialog";
import qrcodeDialog from "./qrcodeDialog";
import CepingpiaoYulan from '../cepinghdglb/cepingpiaoYulan'

import { mapGetters } from 'vuex'
import { encode, decode } from "@/util/Base64";

export default {
  data() {
    return {
      dataForm: {
        hdName: '',
        hdSh: '未审核',
        hdZt: '',
        hdCppfs: '',
      },
      index: '',
      activeName: '',
      itemData: '',
      clearable: true,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      cepingpiaoYulanVisible: false,
      hdglAddOrUpdateVisible: false,
      hdglCppAddOrUpdateVisibale: false,
      hdglSzAddOrUpdateVisibale: false,
      cepingphzVisible: false,

      mxUpdateOrAddIndex: '',
      mxUpdateOrAddPid: ''
    }
  },
  components: {
    Hdglb,
    hdglCpp,
    hdglbSz,
    cepingphz,
    cepinghdcphzDialog,
    cepinghdzhhzDialog,
    qrcodeDialog,
    CepingpiaoYulan
  },
  created() {
    this.getDataList();
    selCppList().then(res => {
      this.itemData = res.data.data;
    });
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //实现阅览器复制
    copyText(e, ElementObj) {
      e.stopPropagation();

      var oInput = document.createElement('input');
      oInput.value = ElementObj;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display = 'none';

      this.$notify.success('复制成功');
    },
    //打分链接封装
    encapsulation(data, type) {
      var json = {
        hdId: data.id,
        key: data.hdCode,
        type: type
      };

      var port = window.location.port;
      var host = window.location.host.replace(":" + port, "");
      var ileUrl = 'http://' + host + ((!port || port == "80") ? "" : (":" + port)) + "/#/login?cpinfo=" + encodeURIComponent(encode(JSON.stringify(json)));

      // var result = encode(str);//加密
      // var result1 = decode(result);//解密

      return ileUrl;
    },
    //测评票预览
    reading(r) {
      this.cepingpiaoYulanVisible = true;
      this.$nextTick(() => {
        this.$refs.cepingpiaoYulan.initXp(r)
      });
    },
    //合票逻辑
    jointVote(e, id) {
      e.stopPropagation();

      var _this = this;
      this.$confirm('是否执行合票，执行后信息不可修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const loading = _this.$loading({
          lock: true,
          text: '合票中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        jointVote(id).then(data => {
          //缺少返回错误处理
          loading.close();
          _this.$notify.success('操作成功');
          _this.getDataList();
        }).catch(error => {
          loading.close();
         //console.log(error);
        });
      }).catch(error => {
       //console.log(error);
      });
    },
    //测评启动
    cepingOpen(e, id) {
      e.stopPropagation();
      var _this = this;
      this.$confirm('是否执行启动，执行后信息不可修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const loading = _this.$loading({
          lock: true,
          text: '启动中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        cepingOpen(id).then(data => {
          //缺少返回错误处理
          loading.close();
          _this.$notify.success('操作成功');
          _this.getDataList();
        }).catch(error => {
          loading.close();
         //console.log(error);
        });
      }).catch(error => {
       //console.log(error);
      });
    },
    //审核处理
    toExamine(e, data) {
      e.stopPropagation();

      if (data.hdZt != "未开始") {
        this.$notify.closeAll();
        this.$notify.error('会议已开始，不能驳回。');
        return;
      }

      var _this = this;
      this.$confirm('是否确定执行，执行后信息不可修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        data.hdSh = "未审核";
        updateHdSh(data).then(data => {
          //缺少返回错误处理
          _this.$notify.success('操作成功');
          _this.getDataList();
        }).catch(error => {
         //console.log(error);
        });
      }).catch(error => {
       //console.log(error);
      });
    },
    getCppName(findId, key) {
      let lResult = "";
      this.itemData.find(value => {
        if (value.id === findId) {
          lResult = value[key];
        }
      })
      return lResult;
    },
    // 查看述职报告
    szbgOpen(e, id) {
      e.stopPropagation()
      this.hdglSzAddOrUpdateVisibale = true
      this.$nextTick(() => {
        this.$refs.hdglSzAddOrUpdate.init(id)
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
        if (this.index === '') {
          this.activeName = '';
        } else {
          this.selinformation(this.index);
        }
      })
      this.dataListLoading = false
    },
    //主级修改增加返回
    zjOperation() {
      this.index = '';
      this.getDataList();
    },
    // 删除
    deleteHandlehdgl(e, id) {
      var _this = this;
      e.stopPropagation()

      selhdidList(id).then(response => {
        if (response.data.data.length > 0) {
          _this.$notify.closeAll();
          _this.$notify.error('存在下一级无法删除');
        } else {
          _this.$confirm('是否确认删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return delObj(id)
          }).then(data => {
            _this.$notify.closeAll();
            _this.$notify.success('删除成功');
            _this.getDataList();
          })
        }
      })
    },
    //删除测评票
    deleteHandleCpp(id) {
      var _this = this;
      this.$confirm('是否确认删除，删除后述职报告也将删除。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObjCpp(id);
      }).then(data => {
        _this.$notify.closeAll();
        _this.$notify.success('删除成功');
        _this.getDataList();
      });
    },
    //序号获取
    selxh(xh) {
      return (this.pageIndex - 1) * this.pageSize + (xh + 1);
    },
    // 阻止事件传播
    stopProp: function (e) {
      e.stopPropagation()
    },
    //动态获取树结构
    selinformation(index) {
      this.index = index;
      selhdidList(this.dataList[index].id).then(response => {
        this.$set(this.dataList[index], 'sjlist', response.data.data);
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    //下级增加测评票最终逻辑
    addOrUpdateHanderCpp(event, parentR, id, index) {
      event.stopPropagation();

      this.hdglCppAddOrUpdateVisibale = true;
      this.$nextTick(() => {
        this.$refs.hdglCppAddOrUpdate.init(id, parentR);
      });
    },
    //测评票添加和修改，一级新增
    hdglAddOrUpdateHandle(event, id) {
      event.stopPropagation(); //防止事件传播
      this.hdglAddOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.hdglAddOrUpdate.init(id)
      })
    },

    //会议票概况
    hdpgkOpen(e, PidDate) {
      e.stopPropagation();
      this.cepingphzVisible = true
      this.$nextTick(() => {
        this.$refs.cepingPhz.init(PidDate, null)
      })
    },
    //测评票概况
    cppgkOpen(e, PidDate, ChildDate) {
      e.stopPropagation();
      this.cepingphzVisible = true
      this.$nextTick(() => {
        this.$refs.cepingPhz.init(PidDate, ChildDate)
      })
    },

    //测评票汇总
    cpphzOpen(e, hd, cpp) {
      e.stopPropagation();
      //console.log(hd.id);
      //console.log(cpp.cppId);
      this.$refs.cepinghdcphzDialog.init(hd.id, cpp.cppId)
    },
    //测评票汇总
    hdhzOpen(e, hd) {
      e.stopPropagation();
      //console.log(hd.id);
      //console.log(cpp.cppId);
      this.$refs.cepinghdzhhzDialog.init(hd.id)
    },
    qrcode(e, hdId) {
      e.stopPropagation();
      this.$refs.qrcodeDialog.init(hdId)

    },
    //状态
    Zt(value) {
      return {
        red: value === "未审核",
        blue: value === "审核中",
        green: value === "已审核",
      };
    },
    //会议状态
    hdZt(value) {
      return {
        red: value === "未开始",
        blue: value === "进行中",
        green: value === "已结束",
        yinCang: value === "已到期",
      };
    },
    //会议状态
    determine(hdZt, hdJssj) {
      if (new Date() > new Date(hdJssj)) {
        if (hdZt != "已结束") {
          return "已到期";
        } else {
          return hdZt;
        }
      }else{
        return hdZt;
      }
    },
  }
}
</script>
